<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link rel="shortcut icon" href="favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="css/bottom.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/header_jsstyle.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/gwc.css"/>
		<style type="text/css">
			.w{
				width: 990px;
			}
		</style>
		<script type="text/javascript" src="js/cookie.js" ></script>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript" src="js/js.js" ></script>
	</head>
	<body>
		<div id="header"></div>
		<div id="window_right"></div>
		<script>
			$("#header").load("header.html")
			window_r();
			$(function(){
			//header-top-left
			$("#header").on("mouseover",".header_top .top_left .lp .span",function(){
				$(this).find(".dress").show();
			})
			$("#header").on("mouseout",".header_top .top_left .lp .span",function(){
				$(this).find(".dress").hide();
			})
			//用户
			if(getCookie("login")){
				var str = "";
				var name = getCookie("name");
				str += ' <p class="yonghu"> <a class="ming" href="#">'+name+'</a> <a class="tuichu" href="login.html"> 退出 </a></p>'
				$("#header").find(".header_top .top_left .login").replaceWith(str);
			}
			//header-top-right
			$("#header").on("mouseover",".header_top .top_right li.tab",function(){
				$(this).find(".show").show();
			})
			$("#header").on("mouseout",".header_top .top_right li.tab",function(){
				$(this).find(".show").hide();
			})
		})
		</script>
		
		<div id="content">
			<div class="w">
				<div class="content_top">
					<h1 class="l"><a href="index.html"><img src="img/logo.jpg" /></a></h1>
					<ul class="l">
						<li class="l">
							<p class="p1">查看购物车</p>
							<span class="p2 one"></span>
						</li>
						<li class="l">
							<p class="p1">拍下商品</p>
							<span class="p2 z two">2</span>
						</li>
						<li class="l">
							<p class="p1">付款</p>
							<span class="p2 z three">3</span>
						</li>
						<li class="l">
							<p class="p1">确认收货</p>
							<span class="p2 z four">4</span>
						</li>
						<li class="l">
							<p class="p1">评价</p>
							<span class="p2 five">5</span>
						</li>
					</ul>
				</div>
			</div>
			<div class="content_gwc">
				<div class="w all">
					<div class="daohang">
						<ul>
							<li class="l quan"><input class="all_xuan" type="checkbox" checked="checked" />全选</li>
							<li class="l chan">产品</li>
							<li class="l shu t">数量</li>
							<li class="l jia t">本店价</li>
							<li class="l xiaoji t">小计</li>
							<li class="l caozuo">操作</li>
						</ul>	
					</div>
					<div class="goods">
						<div class="gwc_goods">
								
						</div>
						<div class="jiesuan">
							<ul class="go_shop l">
								<li class="l go_buy"><a href="index.html">继续购物</a></li>
								<li class="l clear_all">清空购物车</li>
							</ul>
							<ul class="jie_price r">
								<li class="l fu_e">应付总额 ：<span class="alpr">00.0</span> , 比市场价<span class="shijia">75.08</span>节省了<span>12.48(17%)</span></li>
								<li class="l suan"><a class="btn_gopay" href="zhifu.html">去结算</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			$(function(){
				var cookies = document.cookie;
				var cook = cookies.split("; ")
				var arr = [];
				var num = 0;
				for(var i = 0; i < cook.length;i++){
					var coo = cook[i].split("=");
					if(!isNaN(coo[0])){
						arr.push(coo[1]);
					}
				}
				$.ajax({
					type:"get",
					url:"data/gwc.json",
					success:function(data){
						var mag = data.data;
						for(var i = 0 ;i < arr.length;i++){
							var str = "";
							for(var j in mag){
								if(arr[i] == mag[j].id){
									str += '<div class="cookie_goods">'
									str += '<p class="maijia">'+mag[j].maijia+'</p>'
									str += '<ul dataid="'+mag[j].id+'">'
									str += '<li class="l xuan" goods="'+mag[j].id+'"><input class="aaa" type="checkbox" checked/></li>';
									str += '<li class="l chanpin"><a class="btn_details" dataid="'+mag[j].id+'" href="details.html"><img src="'+mag[j].img+'"/></a><a class="btn_details name" dataid="'+mag[j].id+'" href="details.html">'+mag[j].name+'</a></li>';
									str += '<li class="count l"><span class="cut">-</span><input type="text" value="'+getCookie("num"+mag[j].id)+'"/><span class="add">+</span></li>'
									str += '<li class="l price">'+mag[j].price+'</li>'
									str += '<li class="l all_price">'+getCookie("num"+mag[j].id)*mag[j].price+'</li>'
									str += '<li class="delate l" dataid="'+mag[j].id+'">删除</li>';
									str += '</ul>';
									str += '</div>'
								}
							}
							$("#content .content_gwc .goods .gwc_goods").prepend(str);
							
						}
						quanxuan()
					}
				});
				//input选框
				function quanxuan(){
					var $all_xuan = $("#content .content_gwc .all .daohang ul .quan input")
					$all_xuan.on("click",function(){
						if($all_xuan.prop("checked")==true){
							$(".xuan input").prop("checked",true)
						}else{
							$(".xuan input").prop("checked",false)
						}
						moxuan()
					})
					$(".xuan input").on("click",function(){
						moxuan()
					})
					moxuan()
				}
				function moxuan(){
					var $xuan = $(".xuan input")
					var price = 0;
					for(var i in $xuan){
						if($xuan.eq(i).prop("checked")==true){
							price += Number($xuan.eq(i).parents("ul").find(".all_price").html())
						}
					}
					$("#content .content_gwc .goods .jiesuan .jie_price .fu_e span.alpr").html(price)
				}
				//进入详情页
				$("#content .content_gwc .goods .gwc_goods").on("click",".btn_details",function(){
					var dataid = $(this).attr("dataid")
					setCookie("dataid",dataid)
				})
				//删除商品
				$("#content .content_gwc .goods .gwc_goods").on("click",".delate",function(){
					$(this).parents(".cookie_goods").hide()
					var delateid = $(this).attr("dataid");
					removeCookie(delateid);
					removeCookie("num"+delateid);
				})
				//清除购物车
				$("#content .content_gwc .goods").on("click",".clear_all",function(){
					$("#content .content_gwc .goods .gwc_goods").find(".cookie_goods").hide();
					for(var i in arr){
						removeCookie(arr[i]);
						removeCookie("num"+arr[i]);
					}	
				})
				//改变购物车内的商品数量
				$("#content .content_gwc .goods .gwc_goods").on("click",".cut",function(){
					var dataid = $(this).parents("ul").attr("dataid")
					var price = parseFloat($(this).parents("ul").find(".price").html())
					var num1 = parseFloat($(this).next().val())
					if(num1 <= 1){
						num1 = 1;
					}else{
						num1--;
					}
					$(this).next().val(num1)
					setCookie("num"+dataid,num1)
					$(this).parents("ul").find(".all_price").html(price*num1)
					moxuan()
				})
				$("#content .content_gwc .goods .gwc_goods").on("click",".add",function(){
					var dataid = $(this).parents("ul").attr("dataid")
					var price = parseFloat($(this).parents("ul").find(".price").html())
					var num2 = parseFloat($(this).prev().val())
					num2++;
					$(this).prev().val(num2)
					setCookie("num"+dataid,num2)
					$(this).parents("ul").find(".all_price").html(price*num2)
					moxuan()
				})
				//去结账
				$(".btn_gopay").click(function(){
					for(var i = 0 ; i < 400; i++){
						removeCookie(i + "b");
					}
					var allprice = $(".alpr").html()
					setCookie("allprice",allprice)
					$("#content .content_gwc .goods .gwc_goods").find(".aaa").each(function(){
						if($(this).prop("checked")==true){
							var goods = Number($(this).parent().attr("goods"));
							setCookie(goods + "b",goods);
						}
					})
				})
			})
		</script>
		
		<div id="footer">
			<div class="bottom">
				<div class="bottom-bottom">
					
				</div>
			</div>
		</div>
		<script>
			$("#footer .bottom .bottom-bottom").load("bottom-bottom.html");
		</script>
	</body>
</html>
